"use client";

import Image from "next/image";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Logo from "../app/logo.png";

export function Header() {
  const router = useRouter();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [darkMode, setDarkMode] = useState(false);
  const [mounted, setMounted] = useState(false);

  // 初始化时检查用户之前的主题偏好
  useEffect(() => {
    setMounted(true);
    // 检查本地存储中的主题设置
    const savedTheme = localStorage.getItem("theme");
    const prefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;

    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
      setDarkMode(true);
      document.documentElement.classList.add("dark");
    } else {
      setDarkMode(false);
      document.documentElement.classList.remove("dark");
    }
  }, []);

  // 切换深色模式
  const toggleDarkMode = () => {
    if (darkMode) {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    } else {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    }
    setDarkMode(!darkMode);
    setIsMenuOpen(false); // 切换后关闭菜单
  };

  // 避免水合不匹配
  if (!mounted) return null;

  return (
    <header className='bg-black text-white'>
      <div className='w-full bg-black text-white p-3 flex justify-between items-center shadow-md transition-colors duration-300'>
        <div
          className='flex items-center space-x-3 click_active'
          onClick={() => {
            router.push("/");
          }}
        >
          <Image
            src={Logo}
            alt='雅典娜知识库'
            width={60}
            height={60}
            style={{ height: "auto" }}
            className='rounded-sm'
          />
          <h1 className='text-xl font-bold'>雅典娜知识库</h1>
        </div>

        <div className='relative'>
          <button
            className='click_active flex items-center space-x-2 hover:bg-gray-800 p-2 rounded-md transition-colors duration-200'
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            <div className='w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-primary'>
              用
            </div>
            <span>用户名</span>
          </button>

          {isMenuOpen && (
            <div className='absolute right-0 mt-2 w-48 bg-black rounded-md shadow-lg py-1 z-10 transition-colors duration-300'>
              <ul className='text-white'>
                <li
                  className='click_active hover:bg-gray-800 px-4 py-2 flex items-center'
                  onClick={() => {
                    router.push("/favorites");
                  }}
                >
                  <span className='mr-2'>★</span>
                  <span>我的收藏</span>
                </li>
                <li
                  className='click_activehover:bg-gray-800 px-4 py-2 flex items-center'
                  onClick={() => {
                    router.push("/profile");
                  }}
                >
                  <span className='mr-2'>👤</span>
                  <span>查看个人资料</span>
                </li>
                <li
                  className='click_active hover:bg-gray-800 px-4 py-2 flex items-center'
                  onClick={() => {
                    router.push("/profile/edit");
                  }}
                >
                  <span className='mr-2'>✏️</span>
                  <span>编辑个人资料</span>
                </li>
                <li
                  className='click_active hover:bg-gray-800 px-4 py-2 flex items-center cursor-pointer'
                  onClick={toggleDarkMode}
                >
                  <span className='mr-2'>{darkMode ? "☀️" : "🌙"}</span>
                  <span>{darkMode ? "浅色模式" : "深色模式"}</span>
                </li>
                <li className='click_active hover:bg-gray-800 px-4 py-2 flex items-center text-red-500'>
                  <span className='mr-2'>🚪</span>
                  <span>退出登录</span>
                </li>
              </ul>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}
